<template>
  <transition name="animation-fade" mode="out-in">
    <div class="sprit-animate" :style="bgPosition"></div>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
      isAnimateShow: true,
      countInterval: null,
      scale: this.$root.scale || 1
    }
  },
  computed: {
    bgPosition() {
      return {
        backgroundPosition: `${-this.column * 1200}px ${-this.row * 500}px`
      }
    },
    eightNumber() {
      return (this.count).toString(8)
    },
    row() {
      if (this.eightNumber.length === 1) {
        return 0
      }
      return Number(this.eightNumber.slice(0, -1))
    },
    column() {
      return Number(this.eightNumber.slice(-1))
    }
  },
  mounted() {
    this.startAnimate();
  },
  methods: {
    draw() {
      this.count += 1
      if (this.count >= 116) {
        clearInterval(this.countInterval)
        this.countInterval = null;
        this.$emit('finish')
        this.isAnimateShow = false;
      }
    },
    startAnimate() {
      this.countInterval = setInterval(this.draw, 1000 / 25)
    }
  }
}
</script>
<style lang="scss" scoped>
.sprit-animate {
  background: url(~@/assets/images/ga/map-animation.png) no-repeat;
  width: 1200px;
  height: 500px;
  position: absolute;
  bottom: 4%;
  left: 0;
  right: 0;
  // margin: auto;
}
</style>
